<script setup lang="ts">
import ColorManager from "../manager/colorManager";
import { Ref, ref } from 'vue';

const colorArr = ColorManager.get(0);
const colorBor = ref(colorArr.border);
const colorText = ref(colorArr.text);
const colorBoxS = ref(colorArr.boxShadow);

const inputWidth = ref(50);
const inputDom: Ref<HTMLInputElement | undefined> = ref();

const emits = defineEmits(['inputTextValue']);

const inputText_InputEvent = () => {
    const cur = inputDom.value?.value;
    if (!cur) {
        inputWidth.value = 50;
    } else {
        inputWidth.value = 250;
    }
    emits('inputTextValue', cur);
}


</script>

<template>
    <input type="text" ref="inputDom" @input="inputText_InputEvent" :style="`width: ${inputWidth}px;`"
        class="input-text-root" placeholder="检索" />
</template>

<style scoped lang="scss">
.input-text-root {
    padding: 10px;
    margin: 0px 0px 15px 0px;
    border: 1px solid v-bind(colorBor);
    border-radius: 7px;
    color: v-bind(colorText);
    outline: none;
    text-align: center;
    box-shadow: 0px 5px 0px v-bind(colorBoxS);
    transition-duration: 0.2s;
    font-size: 15px;
}

.input-text-root:focus {
    box-shadow:
        0px 5px 0px v-bind(colorBoxS),
        0px 5px 10px v-bind(colorBoxS);
}
</style>